<template>
  <div class="admin-dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="card-header">
            <span>用户统计</span>
          </div>
          <div ref="userStatsChart" style="width: 100%; height: 320px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-card">
          <div slot="header" class="card-header">
            <span>用户列表</span>
          </div>
          <el-table :data="userList" border stripe class="user-table">
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" effect="dark" style="border-radius: 8px;">
                  {{ scope.row.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" :type="scope.row.status === 1 ? 'danger' : 'success'" @click="toggleUserStatus(scope.row)" round>
                  {{ scope.row.status === 1 ? '禁用' : '启用' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div class="dashboard-footer">用户管理功能将在此处集成。</div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  name: 'AdminDashboard',
  data() {
    return {
      userList: []
    };
  },
  mounted() {
    this.fetchUserStats();
    this.fetchUserList();
  },
  methods: {
    async fetchUserStats() {
      try {
        const response = await axios.get('/user/stats');
        const stats = response.data.data;
        this.renderChart(stats);
      } catch (error) {
        console.error('获取用户统计信息失败:', error);
      }
    },
    async fetchUserList() {
      try {
        const response = await axios.get('/user/list', {
          params: {
            pageNo: 1, // 默认请求第一页
            pageSize: 10 // 默认每页10条数据
          }
        });
        this.userList = response.data.data.rows;
      } catch (error) {
        console.error('获取用户列表失败:', error);
      }
    },
    async toggleUserStatus(user) {
      const newStatus = user.status === 1 ? 0 : 1;
      try {
        await axios.put(`/user/${user.id}/status/${newStatus}`);
        user.status = newStatus;
      } catch (error) {
        console.error('更新用户状态失败:', error);
      }
    },
    renderChart(stats) {
      const chartDom = this.$refs.userStatsChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '用户统计',
          left: 'center',
          textStyle: { fontSize: 20, fontWeight: 'bold' }
        },
        tooltip: { trigger: 'axis' },
        grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['总用户数', '新增用户数'],
          axisTick: { alignWithLabel: true },
          axisLabel: { fontSize: 14 }
        },
        yAxis: {
          type: 'value',
          axisLabel: { fontSize: 14 }
        },
        series: [
          {
            name: '用户数',
            type: 'bar',
            data: [stats.totalUsers, stats.newUsers],
            itemStyle: {
              color: '#409EFF',
              barBorderRadius: [8, 8, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 16
            },
            emphasis: {
              itemStyle: {
                color: '#67C23A'
              }
            },
            animationDuration: 1200
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => { myChart.resize(); });
    }
  }
}
</script>

<style scoped>
.admin-dashboard-container {
  padding: 30px;
  background: #f5f7fa;
}
.dashboard-card {
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
}
.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 10px;
}
.user-table {
  margin-top: 10px;
}
.dashboard-footer {
  margin-top: 30px;
  color: #888;
  text-align: center;
  font-size: 15px;
}
</style> 